<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0;">
      <el-cascader class="filter-item" style="width:200px" placeholder="请选择菜单名" :options="options" v-model="keyword" clearable></el-cascader>
      <el-button type="primary" icon="el-icon-search" @click="handleFind">查找</el-button>
      <el-button type="primary" @click="handleAdd" icon="el-icon-edit">添加按钮</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%" v-loading="Loading" stripe>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table border :data="scope.row.childCategoryMenu" :show-header="showHeader" style="width: 100%">
            <el-table-column label="序号" width="60" align="center">
              <template slot-scope="scope_child">
                <span>({{scope_child.$index + 1}})</span>
              </template>
            </el-table-column>

            <el-table-column label="菜单名称" align="center">
              <template slot-scope="scope_child">
                <span>{{ scope_child.row.name }}</span>
              </template>
            </el-table-column>

            <el-table-column label="菜单级别" align="center">
              <template slot-scope="scope_child">
                <el-tag v-if="scope_child.row.menuLevel==1" type="success" size="small" effect="plain">一级菜单</el-tag>
                <el-tag v-if="scope_child.row.menuLevel==2" type="primary" size="small" effect="plain">二级菜单</el-tag>
                <el-tag v-if="scope_child.row.menuLevel==3" type="info" size="small" effect="plain">三级菜单</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="菜单类型" width="100" align="center">
              <template slot-scope="scope_child">
                <el-tag v-if="scope_child.row.menuType==0" type="success" size="small" effect="plain">菜单</el-tag>
                <el-tag v-if="scope_child.row.menuType==1" type="primary" size="small" effect="plain">按钮</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="简介" min-width="200" align="center">
              <template slot-scope="scope_child">
                <span>{{ scope_child.row.summary }}</span>
              </template>
            </el-table-column>

            <el-table-column label="URL" width="200" align="center">
              <template slot-scope="scope_child">
                <span v-if="scope_child.row.menuType==0">/</span>
                <span v-if="scope_child.row.menuType==1">{{ scope_child.row.url }}</span>
              </template>
            </el-table-column>

            <el-table-column label="创建时间" min-width="160" align="center">
              <template slot-scope="scope_child">
                <span>{{ scope_child.row.createTime }}</span>
              </template>
            </el-table-column>

            <el-table-column label="状态" align="center">
              <template slot-scope="scope_child">
                <template v-if="scope_child.row.status == 1">
                  <span>正常</span>
                </template>
                <template v-if="scope_child.row.status == 2">
                  <span>推荐</span>
                </template>
                <template v-if="scope_child.row.status == 0">
                  <span>已删除</span>
                </template>
              </template>
            </el-table-column>

            <el-table-column label="操作" min-width="160" align="center">
              <template slot-scope="scope_child">
                <el-button @click="handleEditBtn(scope.row, scope_child.row)" type="primary" size="small" plain>编辑</el-button>
                <el-button @click="handleDeleteBtn(scope_child.row)" type="danger" size="small" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>

      <el-table-column label="菜单名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="菜单级别" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.menuLevel==1" type="success" size="small" effect="plain">一级菜单</el-tag>
          <el-tag v-if="scope.row.menuLevel==2" type="primary" size="small" effect="plain">二级菜单</el-tag>
          <el-tag v-if="scope.row.menuLevel==3" type="info" size="small" effect="plain">三级菜单</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="菜单类型" width="100" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.menuType==0" type="success" size="small" effect="plain">菜单</el-tag>
          <el-tag v-if="scope.row.menuType==1" type="primary" size="small" effect="plain">按钮</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="简介" min-width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.summary }}</span>
        </template>
      </el-table-column>

      <el-table-column label="URL" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.menuType==0">/</span>
          <span v-if="scope.row.menuType==1">{{ scope.row.url }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" min-width="160" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.status == 1">
            <span>正常</span>
          </template>
          <template v-if="scope.row.status == 2">
            <span>推荐</span>
          </template>
          <template v-if="scope.row.status == 0">
            <span>已删除</span>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="160" align="center">
        <template slot-scope="scope">
          <el-button @click="handleEditMenu(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="handleDeleteMenu(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="block">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-if="dialogFormVisible" :visible.sync="dialogFormVisible" :before-close="handleDialogClose" :close-on-click-modal='false' width="600px">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="父菜单" :label-width="formLabelWidth" prop="buttonParentUid">
          <el-cascader :options="options" placeholder="请选择父菜单" v-model="form.buttonParentUid" clearable></el-cascader>
        </el-form-item>

        <el-form-item label="简介" :label-width="formLabelWidth" prop="summary">
          <el-input v-model="form.summary" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="URL" :label-width="formLabelWidth" prop="url">
          <el-input v-model="form.url" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose()">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllMenu,
  getButtonAll,
  addButton,
  editButton,
  deleteButton,
} from "@/api/categoryMenu";
export default {
  data() {
    const validatebuttonParentUid = (rule, value, callback) => {
      if (this.form.buttonParentUid.length <= 0) {
        return callback(new Error("父菜单不能为空"));
      } else {
        callback();
      }
    };
    return {
      Loading: true,
      tableData: [],
      options: [], //菜单级联数据
      keyword: [],
      currentPage: 1,
      pageSize: 15,
      total: 0, //总数量
      title: "增加按钮",
      formLabelWidth: "70px",
      showHeader: false, //是否显示表头
      dialogFormVisible: false, //控制弹出框
      form: {
        uid: null,
        name: "",
        summary: "",
        url: "",
        sort: 0,
        status: 1,
        menuLevel: 3, //三级菜单
        menuType: 1, //菜单类型 按钮
        buttonParentUid: [], // 选中的button父UID
      },
      rules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" },
          { min: 1, max: 20, message: "长度在1到20个字符" },
        ],
        menuLevel: [
          { required: true, message: "菜单等级不能为空", trigger: "blur" },
        ],
        buttonParentUid: [
          {
            required: true,
            validator: validatebuttonParentUid,
            message: "父菜单不能为空",
            trigger: "blur",
            type: "array",
          },
        ],
        summary: [
          { required: true, message: "菜单简介不能为空", trigger: "blur" },
        ],
        url: [{ required: true, message: "URL不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.menuList();
    this.buttonList();
  },
  methods: {
    // 筛选框数据
    menuList() {
      getAllMenu().then((response) => {
        let options = [];
        for (let a = 0; a < response.data.length; a++) {
          let parent = {};
          parent.label = response.data[a].name;
          parent.value = response.data[a].uid;
          let childData = response.data[a].childCategoryMenu;
          let childList = [];
          for (let b = 0; b < childData.length; b++) {
            let child = {};
            child.label = childData[b].name;
            child.value = childData[b].uid;
            childList.push(child);
          }
          parent.children = childList;
          options.push(parent);
        }
        this.options = options;
      });
    },
    buttonList() {
      this.Loading = true;
      var params = {};
      if (this.keyword.length > 0) {
        // 选取最后一个元素
        params.keyword = this.keyword[this.keyword.length - 1];
      }
      params.currentPage = this.currentPage;
      params.pageSize = this.pageSize;
      getButtonAll(params).then((response) => {
        this.tableData = response.data.records;
        this.currentPage = response.data.current;
        this.pageSize = response.data.size;
        this.total = response.data.total;
        this.Loading = false;
      });
    },
    handleFind() {
      this.buttonList();
    },
    handleAdd() {
      this.title = "增加按钮";
      this.dialogFormVisible = true;
      this.isEditForm = false;
    },
    handleEditBtn(parentRow, row) {
      this.dialogFormVisible = true;
      this.isEditForm = true;
      // 设置级联的父菜单名
      var parentUid = [];
      parentUid.push(parentRow.parentUid);
      parentUid.push(parentRow.uid);
      this.form.buttonParentUid = parentUid;
      this.title = "编辑按钮";
      Object.assign(this.form, row);
    },
    handleDeleteBtn(row) {
      this.$confirm("此操作将把按钮删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = {}
          params.uid = row.uid
          deleteButton(params).then(response => {
            this.$notify({
              title: '成功',
              message: response.data,
              type: 'success'
            });
            this.buttonList();
          });
        })
        .catch(() => {
          this.$notify({
            title: '温馨提示：',
            message: "已取消删除！",
            type: 'info'
          });
        });
    },
    handleEditMenu(row) {
      this.$confirm("是否跳转到菜单管理进行操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push({
            path: "categoryMenu"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消跳转",
          });
        });
    },
    handleDeleteMenu(row) {
      this.$confirm("是否跳转到菜单管理进行操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.push({
            path: "categoryMenu"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消跳转",
          });
        });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.buttonParentUid.length > 0) {
            // 选取最后一个元素
            this.form.parentUid = this.form.buttonParentUid[
              this.form.buttonParentUid.length - 1
            ];
          } else {
            this.$message({
              type: "error",
              message: "请选中父菜单",
            });
            return;
          }
          if (this.isEditForm) {
            editButton(this.form).then((response) => {
              this.$message({
                type: "success",
                message: response.data,
              });
              this.handleDialogClose();
              this.buttonList();
            });
          } else {
            addButton(this.form).then((response) => {
              this.$message({
                type: "success",
                message: response.data,
              });
              this.handleDialogClose();
              this.buttonList();
            });
          }
        }
      });
    },
    handleDialogClose() {
      this.form = {
        uid: null,
        name: "",
        summary: "",
        url: "",
        sort: 0,
        status: 1,
        menuLevel: 3, //三级菜单
        menuType: 1, //菜单类型 按钮
        buttonParentUid: [], // 选中的button父UID
      };
      this.dialogFormVisible = false;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.buttonList();
    },
  },
};
</script>

<style>
/* 二级表格对称 */
.el-table__expanded-cell[class*="cell"] {
  padding: 10px 0 10px 47.4px;
}
</style>